const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const width = window.innerWidth * devicePixelRatio, height = window.innerHeight * devicePixelRatio;
canvas.width = width;
canvas.height = height;
const fontsize = 16 * devicePixelRatio;
const columnWidth = fontsize;
const columnNum = width / fontsize;
console.log(columnNum);
const nextChars = new Array(columnNum).fill(1);
function draw() {
    ctx.fillStyle = 'rgba(0,0,0,0.1)';
    ctx.fillRect(0, 0, width, height);
    for (let i = 0; i < columnNum; i++) {
        const x = i * columnWidth;
        const y = nextChars[i] * fontsize;
        ctx.fillStyle = getRandomColor();
        ctx.font = `${fontsize}px consolas`;
        ctx.fillText(getRandomChar(), x, y);
        ctx.fill();
        if (y > height && Math.random() > 0.99) {
            nextChars[i] = 1;
        }
        else {
            nextChars[i]++;
        }
    }
    requestAnimationFrame(draw);
}
//  获取随机的颜色
function getRandomColor() {
    return '#' + Math.random().toString(16).slice(2, 8);
}
// 获取随机的字符
function getRandomChar() {
    const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    return chars[Math.floor(Math.random() * chars.length)];
}

draw();
